/**
 * @author:Kelvin Yeung
 *
 * @type {{init}}
 */
var regionselector = (function (param) {

    var regionJson = function () {
        var myChart = null;
        var regionFileMappings = {};
        var myRegionNameCodePairs = {};
        var regionMapElementId = 'region-map-' + Math.floor(Math.random() * 10000);
        var regionlistElementId = 'region-list-' + Math.floor(Math.random() * 10000);
        var backButtonId = 'region-selector-btn-' + Math.floor(Math.random() * 10000);
        var selectedNode = null;
        var _click = null;
        var genLoyoutHtml = function () {
        var mapTargetElememtId = null;


            var htmlStr = '<div class="row">' +
                '<div class="col-md-6">' +
                '<div id="' + regionMapElementId + '" style="width: 500px;height:400px;"></div>' +
                '</div>' +
                '<div class="col-md-3">' +
                '<br>' +
                '<br>' +
                '<a id="'+backButtonId+'" href = "#" ><h4 class="text-info"><B>↻返回上一级</B> </h4></a>' +
                '<ul id="' + regionlistElementId + '" class="list-inline ">' +
                ' </ul>' +
                '</div>' +
                '</div>';
            return htmlStr;
        }

        return {

            //获取省份中文对应的拼音
            init: function (targetElememtId) {
                var _this = this;
               _this.mapTargetElememtId = targetElememtId;
                $("#"+targetElememtId).append(genLoyoutHtml());
                var _this = this;
                $.get("../../statics/echarts/map/provicenamemap.json").done(function (data) {
                    regionFileMappings = data;
                    myChart = echarts.init(document.getElementById(regionMapElementId));
                    _this.showMap(_this.defaultRegion);
                });
                // 基于准备好的dom，初始化echarts实例
                $("#"+backButtonId).click(function(e){
                    _this.showMap(_this.defaultRegion);

                });
            },
            reset:function(){
                var _this = this;
                _this.showMap(_this.defaultRegion);
            },

            //获取地区中文名与代码的代码映射
            genRegionNameCodePairs: function (json) {
                var regionNameCodePairs = {};
                $.each(json.features, function (index, item) {
                    if (item.properties.name != '台湾') {

                    regionNameCodePairs[item.properties.name] = item.id;
                    }

                });

                return regionNameCodePairs;

            },
            //刷新地图
            refreshMap: function (region) {
                var _this = this;
                myChart.off('click');
                myChart.clear();
                myChart.setOption({
                    title: {
                        text: region.name,
                        subtext: '请在地图上点选',
                        left: 'center'
                    },
                    series: [{
                        type: 'map',
                        map: region.key,
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '300'
                    }]
                });
                //TODO:显示县级列表
                _this.showChildRegionsList();

                myChart.on('click', function (params) {

                    _this.onClick(params.name);
                });


            },
            //显示地区列表
            showChildRegionsList: function () {
                var _this = this;
                $("#"+regionlistElementId).empty();

                $.each(_this.myRegionNameCodePairs, function (index, item) {
                    $("#"+regionlistElementId).append("<li><a href='#' >"+index+"</a></li>");
                });

                //注册点击事件
                $("#"+regionlistElementId +" > li").click(function(e){
                    _this.onClick( $(this).text());
                });


            },
            showMap: function (region) {


                var _this = this;

                if(region.key =='china'){
                    $("#"+backButtonId).hide();
                }else{
                    $("#"+backButtonId).show();
                }
                //获取已注册的地图，如果地图已存在，则不再请求地图数据
                var regionJson = echarts.getMap(region.key);

                console.warn(regionJson);
                if (regionJson != null && regionJson != undefined) {
                    _this.myRegionNameCodePairs = _this.genRegionNameCodePairs(regionJson.geoJson);
                    _this.refreshMap(region);
                    return;
                }


                $.get('../../statics/echarts/map/' + region.key + '.json', function (json) {
                    console.warn(json);
                    _this.myRegionNameCodePairs = _this.genRegionNameCodePairs(json);
                    echarts.registerMap(region.key, json);
                    _this.refreshMap(region);


                });

            },
            defaultRegion: {"key": "china", "name": "中国"},
            onClick: function (regionName) {

                if(regionName=='台湾')return;
                // 控制台打印数据的名称
                var _this = this;
                var regionKey = regionFileMappings[regionName];
                var myRegion = {"key": regionKey, "name": regionName};
                if (regionKey != undefined) {
                    _this.showMap(myRegion);
                } else {
                    var regionCode = _this.myRegionNameCodePairs[regionName];

                    if(_click!= null){
                        _click({"text":regionName , "value": regionCode});
                    }
                }


            },
            click: function(func){
                _click = func;
            }
        }
    };

    return {
        init: function (mapTargetElementId) {
            if(!mapTargetElementId) {
                console.info("mapTargetElementId is" + mapTargetElementId);
                return;
            }
            var obj = regionJson();

            obj.init(mapTargetElementId);
            return obj;
        }
    };
})();
